<template>
  <div>
    <el-cascader
      expand-trigger="hover"
      :options="state.options"
      v-model="state.selected"
      @change="selectChange"
    />
  </div>
</template>
<script setup name="cityModel">
import citys from "@/assets/js/city.js";


const props = defineProps({
  modelValue: {
    type: Boolean,
  },
});
const emit = defineEmits(["returnBack", "change",'update:modelValue']);
// model: {
//   prop: "modelValue",
//   event: "returnBack"
// },
const state = reactive({
  options: citys,
  selected: props.modelValue,
});
watch(
  () => props.modelValue,
  (val) => {
    state.selected = val;
  }
);

function selectChange (data) {
  emit('update:modelValue', data)
  emit("returnBack", data);
  emit("change", data);
};
</script>
